<template>
  <div class="order-manager" id="orders">
    <unify-header></unify-header>
    <div class="container" ref="container">
      <div class="wrapper">
        <div class="main">
          <div class="filter">
            <ul class="filter-list">
              <li class="item" @click="changeFilter(item)" :class="{activate:item.elect}" v-for="item in filterOptions">
                <label>{{item.label}}</label>
                <i v-show="item.countIndicator" class="count-indicator">{{item.countIndicator}}</i>
              </li>
            </ul>
          </div>
          <div class="panel" :style="{'min-height':total>pageSize?'1141px':'0'}">
            <div class="list-head">
              <label class="order-list">订单列表</label>
              <label class="consignee">收货人</label>
              <label class="amount">金额</label>
              <label class="state">状态</label>
              <label class="operation">操作</label>
            </div>
            <ul class="order-list" v-if="orders && orders.length">
              <li class="item" v-for="order in orders">
                <div class="head">
                  <span class="time">{{order.createdDt}}</span>
                  <a class="order-id" :href="`order/info.html?id=${order.dbId}`">订单号：{{order.code}}</a>
                </div>
                <div class="order-main"
                     :style="{height:(order.worksList && order.worksList.length?order.worksList.length*140:140)+'px'}">
                  <div class="list">
                    <div class="car" v-for="works in order.worksList">
                      <div :style="{backgroundImage: 'url('+works.thumbnailImageUrl+')'}" class="thumbnail"></div>
                      <h6 v-if="order.client!=='ios'" class="title">{{ works.sku }} X {{works.num}}</h6>
                      <h6 v-if="order.client==='ios'" class="title">{{ works.name }} {{ works.shape}} {{ works.size}} X
                        {{works.num}}</h6>
                      <h6 class="specification">作品来源:{{order.client}}</h6>

                      <h6 class="specification">{{order.createDate}}</h6>
                    </div>
                  </div>
                  <div class="name">
                    <span class="consignee">{{order.consigneeName}}</span>
                  </div>
                  <div class="amount">
                    <div class="parcel">
                      <label>{{order.status >= 3 ? '实' : '应'}}付</label>
                      <span class="val">{{order.total}}</span>
                      <span class="total">{{order.total}}</span>
                      <span class="freight">（含运费:￥0）</span>
                    </div>
                  </div>
                  <div class="state">
                    <div class="parcel">
                      <span class="label">{{order.status === 3 ?'已支付':order.orderState}}</span>
                      <a :href="`order/logistics.html?id=${order.dbId}`"
                         v-show="order.status >= 10"
                         class="link">物流信息</a>
                      <a :href="`order/info.html?id=${order.dbId}`" class="link">订单详情</a>
                    </div>
                  </div>
                  <div class="operation">
                    <div class="parcel">
                      <a href="javascript:void(0);"
                         v-show="order.status===1"
                         class="payment-btn btn"
                         @click="pay(order)">付款</a>

                      <a href="javascript:void(0);"
                         v-show="order.status === 1"
                         class="link"
                         @click="cancel(order)">取消订单</a>

                      <a href="javascript:void(0);"
                         v-show="order.status === -1"
                         class="link"
                         @click="deleteOrder(order)">删除订单</a>

                    </div>
                  </div>
                </div>
              </li>
            </ul>
            <el-pagination
              :current-page.sync="pageNum"
              v-show="totalPage"
              small
              layout="prev, pager, next"
              :page-size="pageSize"
              :total="total"
              @current-change="paging">
            </el-pagination>
          </div>
        </div>
        <left-menu selected="order"></left-menu>
      </div>
    </div>
    <unify-footer></unify-footer>
  </div>
</template>

<script type="text/ecmascript-6">
  import UnifyHeader from 'components/header/header.vue'
  import UnifyFooter from 'components/footer/footer.vue'
  import LeftMenu from 'components/center/menu.vue'
  import {ALERT_CUSTOM} from 'base/js/common.config'
  import Api from '@/api.js'
  import * as OrderApi from '@/api/order'

  export default {
    data: function () {
      return {
        userInfo: null,
        total: 0,
        totalPage: 0,
        pageSize: 5,
        pageNum: 1,
        orders: [],
        filterOptions: [{
          label: '全部订单',
          elect: true,
          countIndicator: 0
        }, {
          label: '待付款',
          elect: false,
          countIndicator: 0,
          status: 1
        }, {
          label: '已支付',
          elect: false,
          countIndicator: 0,
          status: 3
        }, {
          label: '已取消',
          elect: false,
          countIndicator: 0,
          status: -1
        }]
      }
    },
    methods: {
      /**
       * 获取订单列表
       * @param filterElect
       * @private
       */
      _queryByPage: function (filterElect) {
        OrderApi.queryByPage({
          userDbId: this.userInfo.userDbId,
          pageSize: this.pageSize,
          pageNum: this.pageNum - 1,
          sort: 'createdDt',
          order: 'desc',
          status: filterElect.status
        }).then(res => {
          if (!res) {
            return
          }
          this.orders = res.results
          if (res.totalPage) {
            this.totalPage = res.totalPage
          }
          this.total = res.totalRecord
        })
      },
      /**
       * 修改订单状态
       * @param dbId
       * @param status
       * @param callback
       * @private
       */
      _updateOrderStatus: function (dbId, status, callback) {
        OrderApi.updateOrderStatus({
          dbId: dbId,
          status: status
        }).then(callback)
      },
      /**
       * 获取表单表头 数量角标
       * @param status
       * @param callback
       * @private
       */
      _listCount: function (status, callback) {
        OrderApi.listCount({
          userDbId: this.userInfo.userDbId,
          status: status
        }).then(callback)
      },
      traversalListCount: function () {
        let _self = this
        this.filterOptions.forEach(item => {
          if (item.status) {
            _self._listCount(item.status, (res) => {
              if (res) {
                item.countIndicator = res - 0
              }
            })
          }
        })
      },
      changeFilter: function (filter) {
        this.filterOptions.forEach((filter) => {
          filter.elect = false
        })
        filter.elect = true
        this.orders = []
        this.pageNum = 1
        this.paging()
      },
      paging: function (pn) {
        if (pn) {
          this.pageNum = pn
        }
        let filterElect = null
        this.filterOptions.forEach((filter) => {
          if (filter.elect) {
            filterElect = filter
          }
        })
        this._queryByPage(filterElect)
      },
      pay: function (order) {
        if (order.client !== 'pc') {
          if (order.client === 'ios') {
            // order.client = '手机端传给雅昌'
          }
          this.$message({
            type: 'info',
            iconClass: "atrup_Message",
            message: `请在手机端传给雅昌上完成支付操作!`
          })
          return
        }
        let orderPay = order.paymentType.split('_')[1]
        location.href = `/pay/payOrder?addressId=${order.addressDbId}&userDbId=${order.userDbId}&dbId=${order.dbId}&paymentType=${orderPay}`
      },
      cancel: function (order) {
        if (order.client !== 'pc') {
          if (order.client === 'ios') {
            order.client = '手机端传给雅昌'
          }
          this.$message({
            type: 'info',
            iconClass: "atrup_Message",
            message: `请在${order.client}上完成取消操作!`
          })
          return
        }
        let _self = this
        this.$confirm('确认要取消订单吗？', ALERT_CUSTOM).then(_ => {
          OrderApi.cancelOrder(order.code).then(res => {
            if (!res) {
              return
            }
            if (res.status === 1) {
              this.paging()
              this.traversalListCount()
            } else {
              this.$alert(res.message, '提示', ALERT_CUSTOM)
            }
          })
        })
      },
      deleteOrder: function (order) {
        if (order.client !== 'pc') {
          if (order.client === 'ios') {
            order.client = '手机端传给雅昌'
          }
          this.$message({
            type: 'info',
            iconClass: "atrup_Message",
            message: `请在${order.client}上完成删除操作!`
          })
          return
        }
        let _self = this
        this.$confirm('确认要删除订单吗？', ALERT_CUSTOM).then(() => {
          Api.car.deleteOrder2(order.code).then(res => {
            if (_self.orders.length > 1) {
              this.paging()
              this.traversalListCount()
            } else {
              if (_self.pageNum - 1) {
                this.paging(_self.pageNum - 1)
              } else {
                this.paging(1)
              }
              this.traversalListCount()
            }
          })
        })
      }
    },
    components: {
      UnifyHeader,
      UnifyFooter,
      LeftMenu
    },
    watch: {},
    mounted: function () {
      this.setMinHeight(this.$refs.container, document.body.clientHeight - 50 - 132)
    },
    created: function () {
      this.getLoginState()
      this.paging(1)
      this.traversalListCount()
    }
  }
</script>

<style lang="scss" type="text/scss" rel="stylesheet/sass">
  .order-manager {
    .wrapper {
      width: 1152px;
      margin: 0 auto;
      overflow: hidden;
    }
    .container {
      padding: 14px 0 92px;
      background: #f1f1f1;
    }
    .main {
      position: relative;
      width: 960px;
      min-height: 668px;
      float: right;
      .filter {
        padding-left: 10px;
      }
    }
    .panel {
      min-height: 560px;
      padding: 26px;
      background: #fff;
      border-radius: 5px;
      border: 1px solid #dcdcdc;
    }
    .list-head {
      font-size: 0;
      .order-list, .consignee, .amount, .state, .operation {
        display: inline-block;
        box-sizing: border-box;
        color: #303030;
        font-size: 16px;
        font-weight: 400;
        text-align: center;
      }
      .order-list {
        width: 400px;
        padding-left: 0.46em;
        text-align: left;
      }
      .consignee {
        width: 130px;
      }
      .amount {
        width: 144px;
      }
      .state {
        width: 116px;
      }
      .operation {
        width: 116px;
      }
    }
    ul.order-list {
      min-height: 456px;
      .item {
        margin-top: 18px;
        border: 1px solid #dedede;
        border-radius: 2px;
      }
      .head {
        background: #eee;
        padding-left: 1.5em;
        color: #999;
        line-height: 40px;
        .order-id {
          color: #999;
          outline: 0;
          margin-left: 3em;
        }
      }
      .order-main {
        overflow: hidden;
        .list, .name, .amount, .state, .operation {
          float: left;
          height: 100%;
          box-sizing: border-box;
          border-right: 1px solid #dcdcdc;
        }
        .list {
          width: 399px;
          padding: 0 20px;
          .car {
            position: relative;
            margin-top: 20px;
            height: 100px;
          }
          .thumbnail {
            position: absolute;
            width: 100px;
            height: 100px;
            border-radius: 2px;
            background-color: #fff;
            background-position: 50%;
            background-repeat: no-repeat;
            background-size: contain;

          }
          .title {
            position: absolute;
            top: 12px;
            left: 120px;
            width: 238px;
            font-size: 14px;
            font-weight: 600;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .specification {
            position: absolute;
            top: 56px;
            left: 120px;
            color: #999;
          }
        }
        .name {
          position: relative;
          width: 130px;
          .consignee {
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            color: #333;
            font-size: 14px;
            line-height: 20px;
            text-align: center;
            margin-top: -10px;
          }
        }
        .amount {
          position: relative;
          width: 144px;
          label, .val, .total, .freight {
            display: block;
            margin-top: 4px;
            font-size: 14px;
            text-align: center;
          }
          label {
            margin-top: 0;
            color: #000;
            font-size: 16px;
            line-height: 1;
          }
          .val {
            color: #a00912;
            &:before {
              content: '￥';
            }
          }
          .total {
            color: #999;
            &:before {
              content: '总 额：￥';
            }
          }
          .freight {
            color: #999;
            line-height: 1;
          }
          .parcel {
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 92px;
            margin-top: -46px;
          }
        }
        .operation, .state {
          display: table;
          width: 115px;
          &.operation {
            border-right: 0;
          }
          .parcel {
            display: table-cell;
            vertical-align: middle;
          }
          .btn, .link, .label {
            display: block;
            width: 100%;
            line-height: 30px;
            text-align: center;
            color: #3a3a3a;
            font-size: 12px;
          }
          .payment-btn {
            width: 80%;
            height: 30px;
            line-height: 30px;
            margin: 0 auto 6px;
            background: #a00912;
            border-radius: 3px;
            color: #fff;
          }
          .order-detail {
            color: #a00912;
          }
        }
      }
    }
    .filter-list {
      overflow: hidden;
      .item {
        position: relative;
        float: left;
        height: 58px;
        padding-top: 14px;
        margin-right: 40px;
        box-sizing: border-box;
        &:last-child {
          margin-right: 0;
        }
        &.activate {
          label {
            border-bottom: 2px solid #c50b16;
          }
        }
        label {
          padding-bottom: 4px;
          color: #303030;
          font-size: 16px;
          font-weight: 400;
        }
        .count-indicator {
          position: absolute;
          top: 5px;
          right: -12px;
          width: 20px;
          line-height: 20px;
          text-align: center;
          color: #fff;
          font-style: normal;
          font-size: 12px;
          font-weight: 400;
          background: #c50b16;
          border-radius: 50%;
        }
      }
    }
    .el-pagination {
      bottom: 60px;
      left: 0;
      right: 0;
      text-align: center;
      margin-top: 30px;
      button:hover {
        color: #a00912;
      }
      .el-pager li:hover {
        color: #a00912;
      }
      .number {
        padding: 0 15px;
        font-size: 14px;
      }
      .number.active {
        border-color: #fff;
        background-color: #fff;
        color: #a00912;
      }
    }
  }
</style>
